<!doctype html>

<html lang="zh-CN">
<head title="小智报表设计器-html嵌入">
    <meta charset="UTF-8">
</head>
<body>
<div>这是一个已经设计好的报表实例 的 回显；config是报表实例的元数据信息；   data是填充报表实例的记录</div>
<button onclick="save()">save</button><button onclick="echo()">echo</button>
<div id="container"></div>
<script src="../../xzSourceCode/XZReportDesigner/xzreportdesigner.js"></script>
<link type="text/css" rel="stylesheet" href="../../xzSourceCode/XZReportDesigner/xzreportdesigner.css">
<script src="report1_config.js"></script>
<script src="report1_data.js"></script>


<script src="options.js"></script>

<script>
    //XZReportDesigner.setKey(授权码)  //可以在localhost/127.0.0.1环境下使用
    const sheetDesign = XZReportDesigner("#container", options);
    sheetDesign.loadData({config:config,data:data});
    // config 为报表配置 ， data为 数据配置

    // sheetDesign.on("dataset-edited",(dataset)=>{
    //     //dataset 被编辑数据集的配置
    //     console.log(dataset)
    //
    // })
    function save(){
        // config 为报表配置 ， data为 数据配置
        const {config,data} = sheetDesign.getData(); //报表设计器的保存事件
        console.log('config:',config);
        console.log('data:',data);
        //集成系统，可以把config，data存储到后台；
    }

    function  echo(){
        sheetDesign.loadData({config:config,data:data});

    }
</script>
</body>

</html>
